
<template>
  <div 
    class="graphic-navigation" 
    :style="containerStyle"
  >
    <!-- 默认导航 -->
    <div
      v-if="!data.items || !data.items.length"
      class="default-navigation"
      :style="navigationStyle"
    >

      <!-- 导航项 -->
      <div
        v-for="index in (data.layout === 'grid' ? data.columns || 4 : data.showSize || 5)"
        :key="index"
        class="navigation-item"
        :style="itemStyle"
      >
        <!-- 图标 -->
        <el-icon 
          v-if="data.navigationType === 'icon'"
          class="navigation-icon"
          :style="iconStyle"
        >
          <component :is="defaultIcon" />
        </el-icon>

        <!-- 图片 -->
        <img
          v-else
          class="navigation-image"
          :src="getImageUrl(defaultImage)"
          alt="默认图片"
          :style="imageStyle"
        />

        <!-- 文字 -->
        <div class="navigation-text" :style="textStyle">导航</div>
      </div>
    </div>

    <!-- 导航列表 -->
    <div
      v-else
      class="navigation-list"
      :style="navigationStyle"
    >
      <!-- 导航项 -->
      <div
        v-for="(item, index) in data.items"
        :key="index"
        class="navigation-item"
        :style="itemStyle"
        @click="handleItemClick(item)"
      >
        <!-- 图标 -->
        <el-icon 
          v-if="data.navigationType === 'icon'"
          class="navigation-icon"
          :style="iconStyle"
        >
          <component :is="item.icon" />
        </el-icon>

        <!-- 图片 -->
        <img
          v-else
          class="navigation-image"
          :src="getImageUrl(item.image) || defaultImage"
          :alt="item.text"
          :style="imageStyle"
        />

        <!-- 文字 -->
        <div class="navigation-text" :style="textStyle">{{ item.text }}</div>
      </div>
    </div>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { Grid } from '@element-plus/icons-vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['item-click'])

// 默认图标
const defaultIcon = computed(() => Grid)

// 默认图片
const defaultImage = computed(() => '/public/logo.png')

// 获取图片URL，处理相对路径和绝对路径
function getImageUrl(url) {
  if (!url) return ''
  // 如果已经是完整URL，直接返回
  if (url.startsWith('http')) return url
  // 如果是/public/开头的路径，直接返回
  if (url.startsWith('/public/')) return url
  // 如果是/profile开头的路径，添加API前缀
  if (url.startsWith('/profile')) return import.meta.env.VITE_APP_BASE_API + url
  // 其他情况，添加API前缀
  return import.meta.env.VITE_APP_BASE_API + url
}

// 计算容器样式
const containerStyle = computed(() => {
  return {
    backgroundImage: props.data.backgroundImage ? `url(${props.data.backgroundImage})` : 'none',
    backgroundColor: props.data.backgroundColor || '#ffffff',
    marginTop: `${props.styles.marginTop || 0}px`,
    marginBottom: `${props.styles.marginBottom || 0}px`,
    marginLeft: `${props.styles.marginLeft || 0}px`,
    marginRight: `${props.styles.marginRight || 0}px`,
    padding: `${props.data.padding || 10}px`,
    borderRadius: `${props.data.borderRadius || 0}px`
  }
})

// 计算导航样式
const navigationStyle = computed(() => {
  return {
    display: props.data.layout === 'grid' ? 'flex' : '-webkit-box',
    flexWrap: props.data.layout === 'grid' ? 'wrap' : 'nowrap',
    justifyContent: props.data.justifyContent || 'space-evenly',
    overflowX: props.data.layout === 'grid' ? '' : 'scroll'
  }
})

// 计算导航项样式
const itemStyle = computed(() => {
  return {
    width: props.data.layout === 'grid' 
      ? `${100 / (props.data.columns || 4)}%` 
      : `${375 / (props.data.showSize || 4) - 1}px`
  }
})

// 计算图标样式
const iconStyle = computed(() => {
  return {
    fontSize: `${props.data.iconSize || 24}px`,
    color: props.data.iconColor || '#333333',
    borderRadius: `${props.data.imageBorderRadius || 0}%`
  }
})

// 计算图片样式
const imageStyle = computed(() => {
  return {
    width: `${props.data.imageSize || 45}px`,
    height: `${props.data.imageSize || 45}px`,
    borderRadius: `${props.data.imageBorderRadius || 0}%`
  }
})

// 计算文字样式
const textStyle = computed(() => {
  return {
    color: props.data.textColor || '#333333',
    fontSize: `${props.data.textSize || 12}px`,
    height: `${props.data.textHeight || 20}px`,
    lineHeight: `${props.data.textHeight || 20}px`
  }
})

// 事件处理
function handleItemClick(item) {
  emit('item-click', item)
}
</script>

<style lang="scss" scoped>
.graphic-navigation {
  width: 100%;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .default-navigation, .navigation-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

    &::-webkit-scrollbar {
      height: 1px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #155bd4;
    }

    .navigation-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 10px;

      .navigation-icon, .navigation-image {
        margin-bottom: 5px;
      }

      .navigation-text {
        text-align: center;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box;
      }
    }
  }
  
  .empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    
    p {
      color: #999;
      font-size: 14px;
      margin: 0;
    }
  }
}
</style>
